<template>
	<view class="charts-box">
		<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {
					categories: ["2016", "2017", "2018", "2019", "2020", "2021"], // X轴标签
					series: [{
							name: "目标值",
							data: [35, 36, 31, 33, 13, 34], // 第一条折线数据
							setShadow: [3, 15, 30, "#1890FF"], // 折线阴影
						},
						{
							name: "完成量",
							data: [18, 27, 21, 24, 6, 28], // 第二条折线数据
							setShadow: [3, 15, 30, "#91CB74"], // 折线阴影
						},
					],
				},
				opts: {
					color: ["#1890FF", "#91CB74"], // 折线颜色
					padding: [15, 15, 0, 15],
					legend: {
						position: "top", // 图例位置
						float: "right",
						fontColor: "#333",
					},
					xAxis: {
						disableGrid: true, // 不显示网格线
						axisLine: false, // 不显示X轴线
						fontSize: 12,
					},
					yAxis: {
						axisLine: false, // 不显示Y轴线
						gridType: "solid", // 网格线类型
						gridColor: "#eee", // 网格线颜色
					},
					extra: {
						line: {
							type: "curve", // 折线类型（曲线）
							width: 2, // 折线宽度
							activeType: "hollow", // 激活点样式
							linearType: "custom", // 自定义线性渐变
							animation: "horizontal", // 动画效果
						},
					},
				},
			};
		},
	};
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 100%;
		height: 380rpx;
	}
</style>